<template>
	<view>
		<form @submit="submit">
		<view class="box">
			<view class="boxItem">
				<text class="title">*原密码</text>
				<input :type="passwordType" name="password" placeholder="请输入原密码" placeholder-class="plStyle"/>
				<text class="gui-icons" @tap="lookPwd1">&#xe609;</text>
			</view>
			<view class="boxItem">
				<text class="title">*新密码</text>
				<input :type="newPasswordType" name="newPassword" placeholder="请输入新密码" placeholder-class="plStyle"/>
			  <text class="gui-icons" @tap="lookPwd2">&#xe609;</text>
			</view>
			<view class="boxItem">
				<text class="title">*确认新密码</text>
				<input :type="againPasswordType" name="repeatPassword" placeholder="请确认新密码" placeholder-class="plStyle"/>
			  <text class="gui-icons" @tap="lookPwd3">&#xe609;</text>
			</view>
		</view>
		<button class="saveBtn" formType="submit">确定</button>
		</form>
	</view>
</template>

<script>
	var graceChecker = require("@/GraceUI5/js/checker.js");
	import {
			mapMutations
	    } from 'vuex'; 
	export default {
		data() {
			return {
				passwordType:'password',
				newPasswordType:'password',
				againPasswordType:'password'
			}
		},
		methods: {
			...mapMutations(['logout']),
			lookPwd1(){
				this.passwordType=this.passwordType=="password"?"text":"password"
				console.log(this.passwordType);
			},
			lookPwd2(){
				this.newPasswordType=this.newPasswordType=="password"?"text":"password"
			},
			lookPwd3(){
				this.againPasswordType=this.againPasswordType=="password"?"text":"password"
			},
			submit : function(e){
						//定义表单规则
						var rule = [
							{name:"password", checkType : "string", checkRule:"6,", errorMsg:"密码至少6个字符"},
							{name:"newPassword", checkType : "string", checkRule:"6,", errorMsg:"密码至少6个字符"},
							{name:"repeatPassword", checkType : "samewith", checkRule:"newPassword", errorMsg:"两次密码输入不一致"}
							// 正则表达式验证演示 : 例如检查必须是有效数字
							// {name:"name7", checkType : "reg", checkRule:"^(-?\\d+)$", errorMsg:"必须是有效数字"}
						];
						//进行表单验证 e.detail.value 内存放着表单数据
						var formData = e.detail.value;
						console.log(formData);
						var checkRes = graceChecker.check(formData, rule);
						if(checkRes){
							
							this.$http.post('/api/user/update/password', formData).then(res => {
								if (res.data.code == 200) {
									this.$u.msg('修改成功，为了您的帐号安全，请重新登陆')
									setTimeout(() => {
										this.logout();
									}, 1500);
								} else {
									this.$u.msg(res.data.msg)
								}
							})
						}else{
							this.$u.msg(graceChecker.error)
						}
						
					},
		}
	}
</script>

<style lang="less">
page{background: #F6F7F8;}	
.box{
	margin-top: 8rpx;
	.boxItem{
		display: flex;justify-content: space-between;align-items: center;background: #FFFFFF;border-bottom: 1px solid #F6F7F8;
		padding: 30rpx;font-size: 30rpx;color: #999;
		.title{width: 200rpx;}
		.gui-icons{}
	}
}
.saveBtn{color: #FFFFFF;}
</style>
